import React from 'react';
import { List, WhiteSpace, Button } from 'antd-mobile';

import './user.sass';

const Item = List.Item;

class User extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="user-container">
        <WhiteSpace />
        <List className="global-list">
          <Item extra={this.props.name || ''}>
            <span className="user-icon" style={{background:`url(${this.props.headImage}) no-repeat center center`, backgroundSize: '2rem 2rem'}} >
            </span>
          </Item>
          <Item extra={this.props.name || ''}>用户名</Item>
          <Item extra={this.props.employeeNumber || ''}>工号</Item>
          <Item extra={this.props.gender === 1 ? '男' : this.props.gender === 2 ? '女' : '保密'}>性别</Item>
          <Item extra={this.props.age || '/'}>年龄</Item>
          <Item extra={this.props.phone || '/'}>手机</Item>
          <Item extra={this.props.email || '/'}>邮箱</Item>
          <Item extra={this.props.organizationName || '/'}>部门</Item>
          <Item extra={this.props.positionString || '/'}>职位</Item>
          <Item extra={this.props.report || '/'}>汇报对象</Item>
          <Item extra={this.props.entryTimeString || '/'}>入职时间</Item>
        </List>
        <div className="user-logout">
          <Button size="small">退出登录</Button>
        </div>
      </div>
    );
  }
}

export default User;
